<html>
  <head>
    <title>Whisper Muse - Create Account</title>

    <style type="text/css">
      a:link
      {
        color: yellow;
      }
      a:visited
      {
        color: #006699;
      }
      a:hover
      {
        color: yellow;
      }
      a:active
      {
        color: #00FF99;
      }

      .title
      {
        font-family: verdana, arial, sans-serif;
        font-size: 38px;
        color: yellow;
      }

      *
      {
        background-color: black;
        padding: 0;
        margin: 0;
      }

      .container
      {
        margin-left: auto;
        margin-right: auto;
        width: 900px;

        background-color: black;
        background-repeat: no-repeat;
      }

      .clear
      {

        clear: both;
        display: block;
      }

      #header
      {
        margin-top: 41px;
        margin-left: 50px;
        display: inline;
        float: left;
        position: relative;
        width: 900px;
        height: 80px;
      }
      #toprow1
      {
        margin-left: 20px;
        display: inline;
        float: left;
        position: relative;
        width: 200px;
        height: 60px;
      }
      #toprow2
      {
        margin-left: 20px;
        display: inline;
        float: left;
        position: relative;
        width: 200px;
        height: 60px;
      }
      #toprow3
      {
        margin-left: 20px;
        display: inline;
        float: left;
        position: relative;
        width: 200px;
        height: 60px;
      }
      #toprow4
      {
        margin-left: 20px;
        display: inline;
        float: left;
        position: relative;
        width: 200px;
        height: 60px;
      }
      #contentleft
      {
        margin-left: 95px;
        margin-top: 0px;
        display: inline;
        float: left;
        position: relative;
        width: 250px;
        height: 1000px;
      }
      #contentright
      {
        margin-left: 50px;
        margin-top: 50px;
        display: inline;
        float: left;
        position: relative;
        width: 400px;
        height: 1000px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div id="header">
        <!-- TODO: Replace with Image -->
        <p class="title">Whisper Muse</p>
      </div>

      <!-- Links -->
      <div id="toprow1">

      </div>

      <div id="toprow2">

      </div>

      <div id="toprow3">

      </div>

      <div id="toprow4">

      </div>

      <div id="contentleft">
        <font face="verdana" size=5 color="yellow">Create Account:</font>
        <br>
        <br>
        <%= form_tag :action => 'create_user' %>
        <p><font face="verdana" color="yellow">User Name:</font><br>
          <%= text_field "user", "username", { :style => 'color:#fff;' } %>
        </p>
        <br>
        <p><font face="verdana" color="yellow">Password:</font><br>
          <%= password_field "user", "password", { :style => 'color:#fff;' } %>
        </p>
        <br>
        <p><font face="verdana" color="yellow">First Name:</font><br>
          <%= text_field "user", "firstname", { :style => 'color:#fff;' } %>
        </p>
        <br>
        <p><font face="verdana" color="yellow">E-mail Address:</font><br>
          <%= email_field "user", "email", { :style => 'color:#fff;' } %>
        </p>
        <br>
        <p><font face="verdana" color="yellow">Birthday:</font><br>
          <%= date_select "user", "birthdate", { :use_short_month => true, :order => [:day, :month, :year], :start_year => 1900, :end_year => Time.now.year, }, { :style => 'color:#fff;' } %>
        </p>
        <br>
        <br>
        <%= submit_tag :'Create Account', { :style => 'color:#fff;' } %>
        <br>
        <br>
        <font face="verdana" color="red">
        <% if flash[:error] %>
      		<%= flash[:error] %>
      	</font>
        <% end %>
        </form>
      </div>

      <div id="contentright">
        <font face="verdana" color="yellow">
          <br>
          	-Usernames may only contain letters and numbers.
          <br>
          <br>
 			-Usernames must be between 6 and 30 characters.
          <br>
          <br>
 			-Passwords must be between 6 and 12 characters.
          <br>
          <br>
        </font>
      </div>

      <div class="clear">

      </div>
    </div>
  </body>
</html>